<template>
  <div>
    <div class="purchaseorder">
      <Search :search="search" :reset="reset" :inline="true">
        <template v-slot:body>
          <!-- <div :class="isMore ? 'search-hidden' : ''" ref="searchbox" > -->
          <div ref="searchbox">
            <table>
              <tr>
                <td>
                  <el-form-item label="暂收单号 :" prop="ordernumber" maxlength="5" labelWidth="100px">
                    <el-input v-model="query.ordernumber" name="ordernumber" clearable />
                  </el-form-item>
                </td>
                <td>
                  <el-form-item label="来减数量 :" prop="quantityreceived" maxlength="5" labelWidth="100px">
                    <el-input v-model="query.quantityreceived" name="quantityreceived" clearable />
                  </el-form-item>
                </td>
                <td>
                  <el-form-item label="条码 :" prop="barcode" maxlength="5" labelWidth="100px">
                    <el-input v-model="query.barcode" name="barcode" clearable />
                  </el-form-item>
                </td>
                <td>
                  <el-form-item label="品号 :" prop="fmaterialid" maxlength="5" labelWidth="100px">
                    <el-input v-model="query.fmaterialid" name="fmaterialid" clearable />
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="品名 :" prop="fmaterialname" maxlength="5" labelWidth="100px">
                    <el-input v-model="query.fmaterialname" name="fmaterialname" clearable />
                  </el-form-item>
                </td>
                <td>
                  <el-form-item label="送货数量 :" prop="quantity" maxlength="5" labelWidth="100px">
                    <el-input v-model="query.quantity" name="quantity" clearable />
                  </el-form-item>
                </td>
                <td>
                  <el-form-item label="送货数量 :" prop="quantity" maxlength="5" labelWidth="100px">
                    <el-input v-model="query.fqty" name="quantity" clearable />
                  </el-form-item>
                </td>
                <td>
                  <el-form-item label="送货单号 :" prop="supplierOrder" maxlength="5" labelWidth="100px">
                    <el-input v-model="query.supplierOrder" name="supplierOrder" clearable />
                  </el-form-item>
                </td>
              </tr>
            </table>
          </div>

          <div v-if="!isMore">
            <table>
              <tr>
                <td>
                  <el-form-item label="采购订单号 :" prop="fbillno" maxlength="5" labelWidth="100px">
                    <el-input v-model="query.fbillno" name="fbillno" clearable />
                  </el-form-item>
                </td>
                <td>
                  <el-form-item label="送货单号 :" prop="supplierOrder" maxlength="5" labelWidth="100px">
                    <el-input v-model="query.supplierOrder" name="supplierOrder" clearable />
                  </el-form-item>
                </td>
                <td>
                  <el-form-item label="来料数量 :" prop="quantityincoming" maxlength="5" labelWidth="100px">
                    <el-input v-model="query.quantityincoming" name="quantityincoming" clearable />
                  </el-form-item>
                </td>
                <td>
                  <el-form-item label="送检数量 :" prop="gitquantity" maxlength="5" labelWidth="100px">
                    <el-input v-model="query.gitquantity" name="gitquantity" clearable />
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="检验方式 :" prop="method" maxlength="5" labelWidth="100px">
                    <el-select v-model="query.method" placeholder="请选择" clearable>
                      <el-option label="抽检" value="0" />
                      <el-option label="全检" value="1" />
                    </el-select>
                  </el-form-item>
                </td>
                <td>
                  <el-form-item label="检验结果 :" prop="inspectionresult" maxlength="5" labelWidth="100px">
                    <el-select v-model="query.inspectionresult" placeholder="请选择" clearable>
                      <el-option label="不合格" value="0" />
                      <el-option label="合格" value="1" />
                    </el-select>
                  </el-form-item>
                </td>
                <td>
                  <el-form-item label="判定:" prop="decision" maxlength="5" labelWidth="100px">
                    <el-select v-model="query.decision" placeholder="请选择" clearable>
                      <el-option label="拒收" value="0" />
                      <el-option label="接收" value="1" />
                      <el-option label="让步接收" value="2" />
                    </el-select>
                  </el-form-item>
                </td>
                <td>
                  <el-form-item label="检验人:" prop="inspector_user" maxlength="5" labelWidth="100px">
                    <el-input v-model="query.inspector_user" name="inspector_user" clearable />
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td>
                  <el-form-item label="电话:" prop="phone" maxlength="5" labelWidth="100px">
                    <el-input v-model="query.phone" name="phone" clearable />
                  </el-form-item>
                </td>
                <td>
                  <el-form-item label="审核人:" prop="auditor_user" maxlength="5" labelWidth="100px">
                    <el-input v-model="query.auditor_user" name="auditor_user" clearable />
                  </el-form-item>
                </td>
                <td></td>
                <td></td>
                <td></td>
              </tr>
            </table>

            <el-divider @click="isMore = !isMore" ref="hideRef">
              <el-icon><ArrowUpBold /></el-icon>
            </el-divider>
          </div>

          <el-divider @click="isMore = !isMore" ref="showRef" v-show="isMore">
            <el-icon><ArrowDownBold /></el-icon>
          </el-divider>
        </template>
      </Search>
      <!-- <Operate :show="open" /> -->
      <div class="table-default">
        <el-button type="primary" style="margin-right: 10px" @click="backHandler">返回</el-button>
        <el-table :data="tableData" class="mt-3" v-loading="loading" border>
          <el-table-column prop="fbillno" label="采购订单号" min-width="200" fixed="left" />
          <el-table-column prop="fsupplierid_name" label="供应商名称" min-width="190" />
          <el-table-column prop="fsupplierid_number" label="供应商编码" min-width="150" />
          <el-table-column prop="fmaterialid" label="品号" min-width="170" />
          <el-table-column prop="fmaterialname" label="品名" min-width="200" />
          <el-table-column prop="fmaterialmodel" label="规格" width="150" />
          <el-table-column prop="inspectionresult" label="检验结果" min-width="130">
            <template #default="scope">
              <el-tag class="ml-2" type="warning" v-if="scope.row.inspectionresult == '不合格'">不合格</el-tag>
              <el-tag class="ml-2" type="success" v-if="scope.row.inspectionresult == '合格'">合格</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="quantityreceived" label="送货数量" min-width="100">
            <template #default="scope">
              {{ Number(scope.row.quantityreceived) }}
            </template>
          </el-table-column>
          <el-table-column prop="funitid_name" label="单位" min-width="80" />
          <el-table-column label="操作" fixed="right" min-width="120">
            <template #default="scope">
              <router-link :to="{ path: '/purchasing/inspectionlistDetail', query: { id: `${scope.row.inspectionlist_id}` } }">
                <show />
              </router-link>
              <!-- <span v-if="scope.row.state == 0" class="spanClass" style="margin: 20px 0"> -->
              <!-- <Destroy @click="destroy(api, scope.row.id)" /> -->
              <!-- <el-button type="warning" size="small" @click="approveHandler(scope.row.id)"><Icon name="wrench-screwdriver" class="w-3 mr-1" />审批</el-button> -->
              <!-- </span> -->
            </template>
          </el-table-column>
        </el-table>
        <Paginate />
      </div>
    </div>

    <Dialog v-model="visible" :title="title" destroy-on-close>
      <Create @close="close(reset)" :primary="id" :api="api" />
    </Dialog>
  </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue'
// import Create from './create.vue'
import { useGetList } from '/admin/composables/curd/useGetList'
import { useDestroy } from '/admin/composables/curd/useDestroy'
import { useOpen } from '/admin/composables/curd/useOpen'
import http from '/admin/support/http'
import { ElMessage } from 'element-plus'
import { ArrowDownBold, ArrowUpBold } from '@element-plus/icons-vue'
import { useRouter, useRoute } from 'vue-router'
import { setTableHeight } from '/admin/utils/setHeight.js'

const router = useRouter()
const route = useRoute()

console.log(route.query.id)

const api = `purchasing/provisionalreceipt/${route.query.id}?provisional_id=1`

const { data, query, search, reset, loading } = useGetList(api)
const { destroy, deleted } = useDestroy()
const { open, close, title, visible, id } = useOpen()

const tableData = computed(() => data.value?.data.data.dataRes)
console.log(tableData)

// 审批
const approveHandler = id => {
  http.put(`/purchasing/examinePda/${id}`).then(r => {
    // console.log(r.data.code);
    ElMessage({
      message: r.data.message,
      type: 'success',
    })
    search()
  })
}

const backHandler = () => {
  router.go(-1)
}

let isMore = ref(true)

let getMore = () => {
  isMore.value = !isMore.value
}
onMounted(() => {
  search()
  deleted(reset)
  setTableHeight('.table-default')
})
</script>


<style>
.el-table {
  height: 80%;
}
.search-hidden {
  height: 100px;
  overflow: hidden;
}

.spanClass .el-button + .el-button {
  margin-left: 0;
}

.el-button--small {
  margin-bottom: 5px;
}
.el-divider--horizontal {
  margin: 15px 0;
}
</style>

